<template>
	<view class="content">
		<u-toast ref="uToast"></u-toast>
		<u-navbar bgColor="transparent" placeholder fixed safeAreaInsetTop>
			<view class="u-nav-slot" slot="left" style="display: flex;align-items: center;">
				<u-icon @click="goBack" name="arrow-left" size="16"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon @click="toHome" name="home" size="20"></u-icon>
			</view>
		</u-navbar>
		<view v-show="showIndex == 2" class="loginBox">
			<view class="logo">
				<image src="../../../static/image/home/logo.png" mode="widthFix"></image>
				<p>兆友售电欢迎您登录</p>
			</view>
			<view class="inputBox">
				<p>手机号</p>
				<input v-model="phone" type="number" placeholder="请输入手机号" placeholder-style="fontSize:28rpx" />
				<p>密码</p>
				<input v-model="password" type="password" placeholder="请输入密码" placeholder-style="fontSize:28rpx" />
				<view class="loginBtn" @click="login">
					立即登录
				</view>
				<view class="change">
					<text @click="goRoute('/pages/index/login/forget')">忘记密码</text>
					<text @click="showIndex = 1">点击注册</text>
				</view>
			</view>
		</view>
		<view v-if="showIndex == 1" class="regBox loginBox">
			<view class="regTitle">
				<p>请填写注册信息并注册</p>
				<p>输入手机号进行注册</p>
			</view>
			<view class="formBox">
				<view class="name">
					<p>您的姓名<text>*</text></p>
					<input type="text" v-model="formData.realname" placeholder="请输入姓名"
						placeholder-style="fontSize:28rpx" />
				</view>
				<view class="name">
					<p>公司名称<text>*</text></p>
					<input type="text" v-model="formData.corporateName" placeholder="请输入公司名称"
						placeholder-style="fontSize:28rpx" />
				</view>
				<view class="name">
					<p>手机号<text>*</text></p>
					<input type="number" placeholder="输入手机号" placeholder-style="fontSize:28rpx"
						v-model="formData.username" />
				</view>
				<view class="name">
					<p>短信验证码<text>*</text></p>
					<view class="">
						<input placeholder="请输入短信验证码" v-model="dxCode" type="number" placeholder-style="fontSize:28rpx" />
						<image
              @click="getDxCode"
              v-if="dxImg"
              :src="dxImg"
              mode="scaleToFill"
              style="width: 70px; height: 35px"
            />
					</view>
				</view>
				<view class="name">
					<p>验证码<text>*</text></p>
					<view class="">
						<input placeholder="请输入验证码" v-model="code" type="number" placeholder-style="fontSize:28rpx" />
						<p @click="getCode">{{second>0?`${second}秒后获取`:'获取验证码'}} </p>
					</view>
				</view>
				<view class="name">
					<p>密码<text>*</text></p>
					<input type="text" placeholder="请设置登录密码" v-model="formData.password"
						placeholder-style="fontSize:28rpx" />
				</view>
			</view>
			<view class="loginBtn" @click="regBtn">
				立即注册
			</view>
		</view>
		<label class="roiPhone" style="display: flex;align-items: center;" @click="xuanze">
			<p class="check">
				<text v-if="!roi"></text>
				<image v-else src="http://cdn.yic3.cn/lawyer/mp-xhs/mine/icon15.png" mode=""></image>
			</p>
			<view class="checkText">我已阅读并同意
				<text @click.stop="go($store.state.agreementList.user)">《服务协议》</text>和
				<text @click.stop="go($store.state.agreementList.provacy)">《隐私协议》</text>
			</view>
		</label>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
				phone: "",
				password: "",
				roi: false,
				verify: false,
				showIndex: 2,
				loadingShow: false,
				loadingText: '加载中...',
				formData: {
					"username": "",
					"password": "",
					"realname": "",
					corporateName: "",
				},
				second: 0,
				reg_tel: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
				dxImg: undefined,
				uuid: undefined,
				dxCode: '',
			}
		},
		onLoad() {
			uni.clearStorageSync()
			this.getDxCode()
		},
		methods: {
			async getDxCode() {
				this.dxCode = ''
				this.uuid = ''
				this.dxImg = ''
				const res = await uni.$api.getDxCode({ phone: '17333333333' })
				if (res.code === 200) {
					this.uuid = res.result.uuid
					this.dxImg = res.result.img
				}
			},
			goBack() {
				if (this.showIndex == 1) {
					this.showIndex++
				} else {
					uni.navigateBack()
				}
			},
			go(e) {
				this.goRoute('/subpackages/webView/webView', {
					fileUrl: e
				})
			},
			// 点击注册
			regBtn() {
				if (!this.reg_tel.test(this.formData.username)) return this.showToast('请填写正确的账号')
				if (!this.formData.password.trim() || this.formData.password.length < 6) return this.showToast(
					'请输入您的密码并不少于6位')
				if (!this.formData.realname) return this.showToast('请填写您的姓名')
				if (!this.formData.corporateName) return this.showToast('请填写公司名称')
				if (!this.code) return this.showToast('请输入验证码')
				this.$api.register({
					"username": this.formData.username,
					"realname": this.formData.realname,
					"password": this.formData.password,
					"corporateName": this.formData.corporateName,
					"smscode": this.code
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '注册成功',
						})
						setTimeout(() => {
							this.showIndex = 2
						}, 1000)
					} else {
						this.showToast(res.data.message)
					}
				})
			},
			login(e) {
				if (this.roi == false) return this.showToast('请勾选协议')
				if (!this.reg_tel.test(this.phone)) return this.showToast('请输入正确的手机号')
				if (!this.password) return this.showToast('请输入密码')
				uni.showLoading()
				this.$api.phoneLogin({
					phone: this.phone,
					password: this.password
				}).then(res => {
					uni.hideLoading()
					this.loadingShow = false
					if (res.data.code == 200) {
						this.$store.commit('updateUserInfo', res.data.result.userInfo)
						let userInfo = res.data.result.userInfo
						uni.setStorageSync('Token', res.data.result.token)
						uni.showToast({
							title: '登录成功'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/index/home/home',
							})
						}, 1500)
					} else {
						this.showToast(res.data.message)
					}
				})
			},
			// 获取验证码
			getCode() {
					if (this.second == 0) {
						if (!this.dxCode) {
						return uni.showToast({
							icon: 'none',
							title: '短信验证码不能为空！',
						})
					}
					// 模拟向后端请求验证码
					if (uni.$u.test.mobile(this.formData.username) == false) {
						this.formData.username = ""
						uni.showToast({
							icon: 'none',
							title: '请输入正确的手机号'
						})
					} else {
						uni.showLoading()
						this.$api.getSendCode({
							"mobile": this.formData.username,
							"smsmode": "1",
							uuid: this.uuid,
							yzmCode: this.dxCode
						}).then(res => {
							uni.hideLoading()
							this.loadingShow = false
							// 这里此提示会被this.start()方法中的提示覆盖
							if (res.data.code === 0) {
								uni.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.second = 60
								let timer = setInterval(() => {
									if (this.second <= 0) {
										clearInterval(timer)
										this.second = 0
									} else {
										this.second--
									}
								}, 1000)
							} else {
								uni.$u.toast(res.data.message);
							}
						})
					}
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			xuanze() {
				this.roi = !this.roi
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import 'login.scss';
</style>